<!--日用电量-->
<template>
  <div class='electricity' id='electricity'></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'carbon',
  props: ['dayElectric'],
  mounted() {
    this.getEchart()
  },
  methods: {
    getEchart() {
      let chartDom = document.getElementById('electricity')
      let myChart = echarts.init(chartDom)
      let option

      option = {
        tooltip: {},
        dataZoom: [
          {
            type: 'inside',
          },
        ],
        grid: {
          top: '20%',
          left: '1%',
          right: '1%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {
          top: '4',
          x: 'center',
          itemGap: 50,
          data: this.dayElectric.legend,
          textStyle: {
            color: '#f9f9f9',
            borderColor: '#fff',
          },
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: '#f9f9f9',
            },
          },
          axisLabel: { //坐标轴刻度标签的相关设置
            textStyle: {
              color: '#d1e6eb',
              margin: 15,
            },
          },
          axisTick: {
            show: false,
          },
          // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
          data: this.dayElectric.x_data,
        }],
        yAxis: [{
          type: 'value',
          min: 0,
          // max: 140,
          splitNumber: 7,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0a3256',
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 20,
            textStyle: {
              color: '#d1e6eb',

            },
          },
          axisTick: {
            show: false,
          },
        }],
        series: [
          {
            name: this.dayElectric.series[0].name,
            type: 'line',
            // smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: '#28ffb3', // 线条颜色
              },
              borderColor: '#f0f',
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
              },
            },
            itemStyle: {
              normal: {
                color: '#28ffb3',

              },
            },
            tooltip: {
              show: false,
            },
            areaStyle: { //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,154,120,1)',
                },
                  {
                    offset: 1,
                    color: 'rgba(0,0,0, 0)',
                  },
                ], false),
                shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            // data: [393, 538, 485, 531, 389, 424, 487, 331, 345, 235, 466, 221]
            data: this.dayElectric.series[0].data,
          },
          {
            name: this.dayElectric.series[1].name,
            type: 'bar',
            barWidth: 10,
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
              },
            },
            itemStyle: {
              normal: {
                color: '#0CC5F0',
                //   function(params) {
                //   var colorList = ['#0CC5F0', '#1AF6C3']
                //   return colorList[params.dataIndex]
                // }
              },
            },
            // data: [200, 382, 102, 267, 186, 315, 316, 222, 54, 77, 89, 122]
            data: this.dayElectric.series[1].data,
          }],
      }

      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang='scss' scoped>
.electricity {
  width: 394px;
  height: 269px;
  margin: auto;
}
</style>

